<script setup>
import { onMounted, reactive } from 'vue';

const app = getApp()
const props = defineProps({
	title:{
		type: String,
		default: ''
	},
	underNavBar: {
		type: Boolean,
		default: true
	},
	showBack:{
		type: Boolean,
		default: true
	},
	bgColor:{
		type: String,
		default: 'transparent'
	}
})

const navBarData = reactive({
	h: '',
	statusBarH: '',
	mr: 0
})

onMounted(()=>{
	const { statusBarH, navBarH, contentMr } = app.globalData.navData
	navBarData.h =  navBarH
	navBarData.statusBarH = statusBarH,
	navBarData.mr = contentMr
})

const back = () =>{
	uni.navigateBack()
}
</script>

<template>
	<view class="container" :style="{'background': props.bgColor}" >
		<view :style="{height: `${navBarData.statusBarH}px`}"/>
		<view class="nav-box" :style="{height: `${navBarData.h}px`}">
			<image v-show="props.showBack" @click="back" src="/static/tabbar/back.png" />
			<view 
				class="nav-box-content" 
				:style="{width:`calc(100%  - 81px)`}"
			>
				<view class="nav-box-title" v-if="props.title!== ''">
					<text class="title-text">{{props.title}}</text>
				</view>
				<slot/>
			</view>
		</view>
	</view>
	<view
		v-show="!props.underNavBar"
		class="navbar-placeholder" 
	 :style="{height: `${navBarData.h + navBarData.statusBarH}px` }"
	/>
</template>

<style lang="scss" scoped>
.container{
	position: fixed;
	width: 750rpx;
	top: 0;
	left: 0;
	z-index: 20;
	box-sizing: border-box;
	z-index: 90;
}
.nav-box{
	display: flex;
	align-items: center;
	image{
		width: 48rpx;
		height: 48rpx;
		margin-left: 33rpx;
	}
}
.nav-box-content{
	height: 100%;
	margin-left: 5rpx;
	overflow: hidden;
}
.nav-box-title{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	.title-text{
		font-size: 36rpx;
		line-height: 36rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
.navbar-placeholder{
	width: 100%;
}
</style>